<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 事件源 -->
		<button id="btn1">传统事件</button>
		<button id="btn2">事件监听</button>
		<script type="text/javascript">
			/*
			  事件注册
			  1.对象.事件类型 = 函数
			  2.对象.addEventListener('事件类型',函数)
			  
			  删除事件
			  1.对象.事件类型 = null
			  2.对象.removeEventListener('事件类型',函数)
		    */

			//----------------------传统--------------------------------------------
			var btn1 = document.querySelector("#btn1");
			btn1.onclick = function() {
				console.log("事件处理1");
			}
			btn1.onclick = function() {
				console.log("事件处理2");
			}
			// btn1.onclick = null;
			//----------------------监听--------------------------------------------
			var btn2 = document.querySelector("#btn2");

			function fn1() {
				console.log("事件监听1");
			}

			function fn2() {
				console.log("事件监听2");
			}
			
			/* btn2.addEventListener("click", function() {
				console.log("事件监听1");
			});
			
			btn2.addEventListener("click", function() {
				console.log("事件监听2");
			}); */
			
			btn2.addEventListener('click',fn1);
			btn2.addEventListener('click',fn2);

			btn2.removeEventListener("click", fn2);
		</script>
	</body>
</html>
